<template>
   <ul class="left-wrapper">
     <li class="left-item"
         v-for="item in typeList"
         :key="item.id"
         @click="handleTypeId(item.id)"
     >
       <div class="tab-pane-item">{{item.typeName}}</div>
     </li>
   </ul>
</template>

<script>
  export default {
    props: {
        typeList: {
            type: Array,
            default: () => []
        },
        typeId: {
            type: String,
            default: ''
        }
    },
    methods: {
        handleTypeId (id) {
            this.$emit('update:typeId', id)
        }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../common/scss/variable";
  .left-wrapper {
     position: sticky;
     top: 25px;
     /*left: 0;*/
     display: flex;
     flex-direction: column;
     padding: 20px 0;
     border-radius: 20px;
     text-align: center;
     border: 1px solid $border-color;
     color: $font-gray;
     font-size: 16px;
     line-height: 22.5px;
     .left-item {
       & + .left-item {
         margin-top: 16px;
       }
       .tab-pane-item {
         width: 100%;
         line-height: 16px;
         text-align: center;
         cursor: pointer;
       }
     }
  }
</style>
